<?php $this->load->view('includes/header'); ?>

<!--Miguel-->
    <script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery.mask.js"></script>
    <script type="text/javascript" src="<?php echo base_url(); ?>application/views/admin/js/ruta.js"></script>
    

<style type="text/css"> 
	
	.route-table{
		font-size: 0.7em ;
		border:1px solid black;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;

	}

	.route-table td,.route-table th{
		border:1px solid black;
		/*padding:2px;*/
	}

	.table-content{
		margin: 50px 50px ;

	}
    
    .ruta_hora{
        

	height: 12px;
	width: 33px;

    }

	.td-center rc-tn-route-img{
		text-align: center;
	}

.bg-white{
	padding-top: 70px;
	background:white;
	}
	
	.rc-table-route{
	height:20px;
	} 
	
	.rc-tn-route-img{
	padding:0 0;
	}
	
	#example_length,.dataTables_filter,.dataTables_info,.dataTables_paginate{
	display:none;
	}
	
	table .span2 {
		width: 45px;
		height:10px;
	}
	table td {
		vertical-align: baseline;
		border-top:0;
	}

	.bg-grey{
	background:#f6f6f6;
	}
	
	table th, table td {
		height:10px;
	}
	
	.table-condensed th, .table-condensed td {
		padding: 2px 2px;
	}
	
	.border-rad{
    	border-radius:30px;
		-moz-border-radius:30px 30px 30px 30px; 
		-webkit-border-radius:30px 30px 30px 30px;
    }
    
    
    .main-container {
			margin-top: 15px;
			padding-left:5px;
			padding-right:5px;
}
	
	#myModal {
	width: 990px; /* SET THE WIDTH OF THE MODAL */
	margin: -100px 0 0 -495px; /* CHANGE MARGINS TO ACCOMODATE THE NEW WIDTH (original = margin: -250px 0 0 -280px;) */
	padding:5px;
}

#myModal td {
background:#ccc;
}

	
</style>

<script>
$(document).ready(function(){

/*
	<td class=\"  sorting_1\"><input type=\"text\" name=\"horaVisita[]\" class=\"span2 horaVisita input-horavisita\" maxlength=\"5\" autocomplete=\"off\"></td>
	<td class=\"cli_nombrecliente \">".$oServicio['cli_nombrecliente']."</td>
	<td class=\"cli_comunacliente \">".$oServicio['cli_comunacliente']."</td>
	<td class=\"cli_fonocliente \">".$oServicio['cli_fonocliente']."</td>
	<td class=\"cli_direccioncliente \">".$oServicio['cli_direccioncliente']."</td>
	<td class=\"desc_corta \">".$oServicio['desc_corta']."</td>

	<td class=\"cantidad_visitas \">".$oServicio['cantidad_visitas']."</td>
	*/
	$('.myModalref').click(function(ev){





		$('#myModal').modal('show');
	});




	
	$('.datepicker').datepicker();



	var nowTemp = new Date();
	var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
	 
	var checkin = $('#dpd1').datepicker({
	  onRender: function(date) {
	    return date.valueOf() < now.valueOf() ? 'disabled' : '';
	  }
	}).on('changeDate', function(ev) {
	  if (ev.date.valueOf() > checkout.date.valueOf()) {
	    var newDate = new Date(ev.date)
	    newDate.setDate(newDate.getDate() + 1);
	    checkout.setValue(newDate);
	  }
	  checkin.hide();
	  $('#dpd2')[0].focus();
	}).data('datepicker');
	var checkout = $('#dpd2').datepicker({
	  onRender: function(date) {
	    return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
	  }
	}).on('changeDate', function(ev) {
	  checkout.hide();
	}).data('datepicker');
	
});





</script>


</head>
<body>

	<!-- header -->
  	<div class="header container">
		<div class="logo-wrapper">
			<img src="<?php echo base_url(); ?>/assets/imagenes/logo.png">			
		
		</div>
  	</div>
	<!-- header -->


 <!-- Main menu -->
  <?php $this->load->view('includes/menu'); ?>
  <!-- Main menu -->
    
     
    
    
    <div class="container border-rad ">
	    <div class="bg-grey border-rad main-container">
	    <br/><br/><br/>
	    Fecha: <input type="text" value="02/16/12" data-date-format="mm/dd/yy" class="datepicker" >
	    <br/><span class="rc-title-pag">Rutas</span>
	    <hr class="dotted" />
	    Movil XXX
				
					<table cellpadding="0" cellspacing="0" border="0" class="rc-route-table rc-table table-hover table-striped table-bordered table-condensed" id="example">
						<thead>
							<tr>
								
								<th >hrs.</th>
								<th>Nombre Cliente</th>
								<th>Comuna</th>
								<th>Telefono</th>
								<th>Dirección</th>
								<th>Servicios</th>
								<th>Nº<br>vta</th>
								<th>mod<br>visita</th>
								<th>mod<br>serv</th>
								<th>imp<br>ejec</th>
								<th>imp<br>cert</th>
								<th>estado<br>ejec</th>
							</tr>
						</thead>
						<tbody>
					
						
						<?php echo $oTablaRuta;?>
						
						</tbody>
					</table>
	    
	    
	    
	    
	  
	    </div>
    </div>
   
    
    
    <!-- Button to trigger modal -->
<button class="myModalref btn btn-primary">cargaa</button>
   
   
    
  <!-- Modal -->
<div id="myModal" class="modal hide fade" style="background:#befebe; tabindex="-1" data-width="760" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="rc-modal-cambiofecha"  ">
		<form>
			<span> Cambio Fecha Visita</span>
			<table cellpadding="0" cellspacing="0" border="0" class="rc-route-table rc-table table-hover table-striped table-bordered table-condensed" style="background: white;" >
					<thead>
						<tr>
							
							
							<th>Nombre Cliente</th>
							<th>Comuna</th>
							<th>Telefono</th>
							<th>Dirección</th>
							<th>Servicios</th>
							
							<th>Nº<br>vta</th>
							<th>Cambio Fecha</th>
						</tr>
					</thead>
					<tbody>
				
					<tr class="odd">
							<td class="cli_nombreclientemod ">Combustibles Suarez</td>
							<td class="cli_direccionclientemod ">Puerto saavedra</td>
							<td class="cli_fonoclientemod  ">61743842222</td>
							<td class="cli_direccionclientemod  ">Juvencio ovalle 20456</td>
							<td class="serviciosmod  ">DR,DT,CF</td>
							<td class="numserviciosmod">1/6</td>
							<td class="fechacambiomod  td-center rc-tn-route-img  "><input type="text" value="02/16/12" name="datemod" data-date-format="mm/dd/yy" class="datepicker" ><img src="http://localhost/ratacom/assets/imagenes/calendar.gif" class="rc-table-route"></td>
						</tr>
					</tbody>
				</table>
    
			
		
		</form>
	</div>
</div>  
    
    
    
   
    
 </body>
 </html>